<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="__PUBLIC__/css/font.css">
    <link rel="stylesheet" href="__PUBLIC__/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="__PUBLIC__/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="x-body">
    <form class="layui-form" method="post" action="{:U('Food/create')}">
        <h2><strong>菜品信息</strong></h2>
        <hr>
        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span>菜谱名称
            </label>
            <div class="layui-input-inline">
                <input type="text" id="name" name="name" required="" lay-verify="name"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <!--<span class="x-red">*</span>将会成为您唯一的登入名-->
            </div>
        </div>

        <div class="layui-form-item">
            <label  class="layui-form-label">
                <span class="x-red">*</span>所属分类
            </label>
            <div class="layui-input-inline">
                <select name="food_cate_id" lay-verify="required" lay-search>
                    <foreach name="cate" item="v" key="k">
                        <option value="{$v.id}">{$v.delimiter}{$v.cate_name}</option>
                    </foreach>

                </select>
            </div>
            <div class="layui-form-mid layui-word-aux">
                <!--<span class="x-red">*</span>将会成为您唯一的登入名-->
            </div>
        </div>



        <div class="layui-form-item">
            <label for="price" class="layui-form-label">
                <span class="x-red">*</span>价格
            </label>
            <div class="layui-input-inline">
                <input type="text" id="price" name="price" required="" lay-verify="price"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="taste" class="layui-form-label">
                <span class="x-red"></span>口味
            </label>
            <div class="layui-input-inline">
                <input type="text" id="taste" name="taste"  lay-verify="taste"
                       autocomplete="off" class="layui-input">
            </div>

        </div>
        <h2><strong>菜品材料</strong></h2>
        <hr />
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <button type="button" class="layui-btn layui-btn-danger" id="addStock">
                <i class="layui-icon">&#xe61f;</i> 添加材料
            </button>
        </div>

        <div id="stockAdd" style="margin-top:10px;">

        </div>


        <div class="layui-form-item">
            <label for="price" class="layui-form-label">
                <span class="x-red"></span>单位
            </label>
            <div class="layui-input-inline">
                <input type="text" name="unit" placeholder="单位" autocomplete="off" class="layui-input" lay-verify="unit">

            </div>

        </div>

        <h2><strong>大、中、小份损耗</strong></h2>
        <hr />


        <div class="layui-form-item">

            <label for="price" class="layui-form-label">
                <span class="x-red"></span>
            </label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" id="big" name=""  lay-verify="unit"
                       autocomplete="off" class="layui-input" placeholder="大份">
            </div>

            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" id="medium" name=""  lay-verify="unit"
                       autocomplete="off" class="layui-input" placeholder="中份">
            </div>

            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" id="small" name=""  lay-verify="unit"
                       autocomplete="off" class="layui-input" placeholder="小份">
            </div>

            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">元</span>
            </div>

        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">是否上架</label>
            <div class="layui-input-block">
                <input type="checkbox" checked="" name="is_show" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
            </div>
        </div>


        <div class="layui-form-item">
            <label for="" class="layui-form-label">
            </label>
            <button class="layui-btn" lay-filter="add" lay-submit="">
                添加
            </button>
        </div>
    </form>


</div>
<script>
    layui.use(['form','layer'], function(){
        $ = layui.jquery;
        var form = layui.form,
            layer = layui.layer;

        //自定义验证规则
        form.verify({
            name: function(value){
                if(value.length < 1){
                    return '分类名称太短了';
                }
            },
            price: [/[0-9]$/, '价格必须为数字'],
            数量: [/[0-9]$/, '数量必须为数字'],

        });

        //监听提交
        form.on('submit(add)', function(data){
            var stock = document.getElementsByName('stock_id');
            var num = document.getElementsByName('num');
            var food = [];
            for (var i = 0; i < stock.length; i++) {
                food[i] = {};
                food[i]['stock_id'] = stock[i].value;
                food[i]['deal_value'] = num[i].value;
            }

            data.field.food ='\''+JSON.stringify(food)+'\'';
            data.field.bigLoss = $('#big').val();
            data.field.mediumLoss = $('#medium').val();
            data.field.smallLoss = $('#small').val();
            $.post("{:U('Food/create')}", data.field, function(resp) {
                if (resp.code == 0) {
                    layer.alert("添加成功", {icon: 6},function () {
                        parent.location.reload();
                    });
                } else {
                    layer.msg(resp.msg, function () { });
                }
            }, 'json')

            return false;
        });

        $('#addStock').click(function () {
                $.get('{:U("Food/test")}', function (data) {
                    $(data).appendTo("#stockAdd");
                }, 'text')
        });

        //删除材料
        removeStock = function (obj) {
            $(obj).parent().parent().remove(); 
        };






    });


</script>

</body>

</html>